<template>
  <view class="industry-select-container">
    <!-- 页头 -->
    <view class="header">
      <view class="header-content">
        <view class="back-btn" @click="goBack">
          <image class="back-icon" src="/static/icons/candidate/pre_page.png"></image>
        </view>
        <text class="header-title">所在行业</text>
        <view class="header-right"></view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <view class="title-wrapper">
        <text class="title-one">所在行业</text>
        <text class="title-two">请选择行业，最多1项</text>
      </view>

      <!-- 行业列表 -->
      <view class="industry-list">
        <view 
          v-for="industry in industryArray" 
          :key="industry.id" 
          class="main-item-box"
        >
          <!-- 一级行业 -->
          <view class="main-item" @click="toggleIndustry(industry)">
            <text class="main-item-words">{{ industry.name }}</text>
            <image 
              :src="selectedIndustryId === industry.id ? '/static/icons/arrow-open.png' : '/static/icons/arrow-close.png'" 
              class="arrow"
            ></image>
          </view>

          <!-- 二级行业 -->
          <view 
            v-show="selectedIndustryId === industry.id" 
            class="sub-item-wrapper"
          >
            <view class="sub-tags-container">
              <view 
                v-for="subIndustry in subIndustryArray" 
                :key="subIndustry.id"
                :class="selectedSubIndustryId === subIndustry.id ? 'sub-tag-selected' : 'sub-tag'"
                @click="selectSubIndustryAndReturn(subIndustry)"
              >
                <text :class="selectedSubIndustryId === subIndustry.id ? 'sub-tag-text-selected' : 'sub-tag-text'">
                  {{ subIndustry.name }}
                </text>
              </view>
            </view>
          </view>

          <!-- 分割线 -->
          <view class="line-wrapper">
            <view class="line"></view>
          </view>
        </view>
      </view>

      
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getIndustryTopListApi, getChildrenIndustryApi } from '../../../api/company.js'

// 行业数据
const industryArray = ref([]) // 一级行业
const subIndustryArray = ref([]) // 二级行业

// 选中的行业ID
const selectedIndustryId = ref('') // 选中的一级行业ID
const selectedSubIndustryId = ref('') // 选中的二级行业ID

// 页面加载时获取一级行业数据
onMounted(async () => {
  await fetchIndustryTopList()
})

// 获取一级行业列表
const fetchIndustryTopList = async () => {
  try {
    const data = await getIndustryTopListApi()
    if (data && Array.isArray(data)) {
      industryArray.value = data
      console.log('获取一级行业成功:', data)
    }
  } catch (error) {
    console.log('获取一级行业失败:', error)
    uni.showToast({
      title: '获取行业数据失败',
      icon: 'none'
    })
  }
}

// 获取二级行业列表
const fetchChildrenIndustry = async (industryId) => {
  try {
    const data = await getChildrenIndustryApi(industryId)
    if (data && Array.isArray(data)) {
      subIndustryArray.value = data
      console.log('获取二级行业成功:', data)
    }
  } catch (error) {
    console.log('获取二级行业失败:', error)
    uni.showToast({
      title: '获取子行业数据失败',
      icon: 'none'
    })
  }
}

// 切换行业展开/收起
const toggleIndustry = async (industry) => {
  if (selectedIndustryId.value === industry.id) {
    // 收起
    selectedIndustryId.value = ''
    selectedSubIndustryId.value = ''
    subIndustryArray.value = []
  } else {
    // 展开
    selectedIndustryId.value = industry.id
    selectedSubIndustryId.value = ''
    // 获取对应的二级行业
    await fetchChildrenIndustry(industry.id)
  }
}

// 选择二级行业并直接返回
const selectSubIndustryAndReturn = (subIndustry) => {
  selectedSubIndustryId.value = subIndustry.id
  
  // 找到选中的一级和二级行业
  const selectedIndustry = industryArray.value.find(item => item.id === selectedIndustryId.value)
  
  if (selectedIndustry && subIndustry) {
    // 返回上一页并传递数据
    const pages = getCurrentPages()
    if (pages.length > 1) {
      const prevPage = pages[pages.length - 2]
      
      // 方法1：通过页面实例直接调用方法
      if (prevPage && prevPage.$vm && prevPage.$vm.updateFieldValue) {
        prevPage.$vm.updateFieldValue('industry', subIndustry.name)
      }
      
      // 方法2：通过全局事件总线传递数据（备用方案）
      uni.$emit('updateIndustry', subIndustry.name)
    }
    
    uni.navigateBack()
  }
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}


</script>

<style scoped lang="less">
.industry-select-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 页头样式 */
.header {
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  height: 88rpx;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 48rpx;
  height: 48rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.header-right {
  width: 60rpx;
}

/* 内容区域 */
.content {
  padding: 30rpx;
}

/* 标题样式 */
.title-wrapper {
  margin-bottom: 50rpx;
}

.title-one {
  display: block;
  font-size: 40rpx;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 15rpx;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.title-two {
  display: block;
  font-size: 28rpx;
  color: #999;
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 行业列表样式 */
.industry-list {
  margin-bottom: 60rpx;
}

.main-item-box {
  margin-bottom: 20rpx;
}

.main-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 20rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  cursor: pointer;
}

.main-item-words {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.arrow {
  width: 32rpx;
  height: 32rpx;
  opacity: 0.6;
}

/* 二级行业样式 */
.sub-item-wrapper {
  margin: 20rpx 0;
  padding: 0 20rpx;
}

.sub-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.sub-tag {
  padding: 12rpx 20rpx;
  background-color: #f8f9fa;
  border-radius: 20rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e9ecef;
}

.sub-tag:hover {
  background-color: #e9ecef;
}

.sub-tag-selected {
  padding: 12rpx 20rpx;
  background-color: #00bdb4;
  border-radius: 20rpx;
  cursor: pointer;
  border: 1px solid #00bdb4;
}

.sub-tag-text {
  font-size: 24rpx;
  color: #333;
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.sub-tag-text-selected {
  font-size: 24rpx;
  color: #ffffff;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 分割线样式 */
.line-wrapper {
  margin: 20rpx 0;
}

.line {
  height: 1px;
  background-color: #f0f0f0;
  width: 100%;
}


</style>
